<template>
  <view class="top-bar-wrap" :style="{ backgroundColor: backgroundColor }">
    <view
      v-for="(item, index) in tabs"
      :key="index"
      :class="{ active: item.selected, 'top-bar-item': true }"
      @click="onClick(item)"
      >{{ item.name }}</view
    >
  </view>
</template>
<script>
export default {
  name: 'TopBar',
  props: {
    tabBars: {
      type: Array,
      default: () => [],
      required: true
    },
    tabIndex: {
      type: [Number, String],
      default: 0,
      required: true
    },
    backgroundColor: {
      type: String,
      default: ''
    }
  },
  computed: {
    tabs() {
      return this.tabBars.map((item) => {
        item.selected = false
        if (item.index === this.tabIndex) {
          item.selected = true
        }
        return item
      })
    }
  },
  data() {
    return {}
  },
  methods: {
    onClick(obj) {
      this.$emit('change', obj)
    }
  }
}
</script>
<style lang="scss" scoped>
.top-bar-wrap {
  justify-content: center;
  display: flex;
  .top-bar-item {
    position: relative;
    height: 44px;
    line-height: 44px;
    font-size: 36rpx;
    font-weight: 700;
    color: #999;
    text-align: center;
    padding: 0 12px;
    min-width: 100px;
  }

  .active {
    color: #333;
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      height: 6rpx;
      width: 60rpx;
      background-color: #454a5e;
    }
  }
}
</style>
